﻿<!DOCTYPE html>
<!--行为安全观察与沟通频次管理-->
<!--By Songyf-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>
    <link href="/static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="/static/js/vue-treeselect/vue-treeselect.js"></script>
    <style>
        .el-radio {
            top: -4px
        }

        .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }
    </style>




</head>

<body>

    <div id="app" v-cloak>
        <el-form label-position="right" :rules="rules" ref="ruleForm" :inline="true" :model="Form" class="demo-form-inline"
                 style="margin-bottom: 15px;">

            <el-row>
                <el-col :span="24">
                    <div class="elst-select-mini">
                        <el-form-item prop="name">
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{"姓名:"}}
                                </template>
                                <tree-department-staff-single-jgstop slot="suffix" v-model="Form.name" style="line-height:28px;"></tree-department-staff-single-jgstop>
                                <!--<treeselect v-model="Form.department"
                :options="department"
                :flat="true"
                :show-count="true"
                slot="suffix"
                style="line-height: 28px;"
                placeholder="请选择" />-->
                            </el-input>
                            <span class="iputLineMust" v-if="!Form.name">
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>


            <el-row style="padding: 10px;">
                <el-col :span="24" style="padding-top: 2px;">
                    <el-checkbox v-model="Form.isWarn" @change="IsNotRemind">
                        {{BehaviorSafetyCommunicationFrequency.IsNotRemind}}
                    </el-checkbox>
                </el-col>

            </el-row>

            <el-row style="padding: 10px;">
                <el-col :span="8">

                    <div class="elst-select-mini">
                        <el-form-item prop="warnDays">
                            <el-input size="mini" v-model="Form.warnDays" :disabled="Dom.RadioDisabled">
                                <template slot="prepend">
                                    {{'提前提醒天数'}}
                                </template>

                            </el-input>
                            <span class="iputLineMust" v-if="!Form.warnDays">
                                <img src="/static/images/exclamation.png" alt="">
                            </span>
                        </el-form-item>
                    </div>
                </el-col>


            </el-row>


            <el-row style="padding: 10px;">
                <el-col :span="3" style="padding-top: 8px;">
                    <el-radio ref="test1" v-model="Form.warnType" :disabled="Dom.RadioDisabled" @change="RadioIsNotRemind"
                              label="01">{{BehaviorSafetyCommunicationFrequency.AccordingMonth}}</el-radio>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingMonth_Day" size="mini"
                               :disabled="Dom.SelectDisabled.AccordingMonth_SelectDisabled" placeholder="日">
                        <el-option v-for="item in day" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingMonth_Hour" size="mini"
                               :disabled="Dom.SelectDisabled.AccordingMonth_SelectDisabled" placeholder="时">
                        <el-option v-for="item in hour" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>

            <el-row style="padding: 10px;">
                <el-col :span="3" style="padding-top: 8px;">
                    <el-radio v-model="Form.warnType" :disabled="Dom.RadioDisabled" @change="RadioIsNotRemind"
                              label="02">{{BehaviorSafetyCommunicationFrequency.AccordingWeek}}</el-radio>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingWeek_Week" size="mini"
                               :disabled="Dom.SelectDisabled.AccordingWeek_SelectDisabled" placeholder="星期">
                        <el-option v-for="item in week" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingWeek_Hour" size="mini"
                               :disabled="Dom.SelectDisabled.AccordingWeek_SelectDisabled" placeholder="时">
                        <el-option v-for="item in hour" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    &nbsp;
                </el-col>
                <el-col :span="2">
                    &nbsp;
                </el-col>
            </el-row>


            <el-row style="padding: 10px;">
                <el-col :span="3" style="padding-top: 8px;">
                    <el-radio v-model="Form.warnType" :disabled="Dom.RadioDisabled" @change="RadioIsNotRemind"
                              label="03">{{BehaviorSafetyCommunicationFrequency.AccordingDay}}</el-radio>
                </el-col>
                <el-col :span="3">
                    <el-select @visible-change="visibleChange" v-model="Dom.Value.AccordingDay_Hour" size="mini"
                               :disabled="Dom.SelectDisabled.AccordingDay_SelectDisabled" placeholder="时">
                        <el-option v-for="item in hour" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-col>
            </el-row>



            <el-row type="flex" justify="end">
                <el-form-item>
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnCommit}}</el-button>
                    <el-button type="primary" @click="parent.ListItem.dialogVisible=false">{{col.btnBack}}</el-button>
                </el-form-item>
            </el-row>

        </el-form>


    </div>
    <script>
         Vue.component('tree-department-staff-single-jgstop', {
            props: ['value', 'multiple'],
            data: function () {
                return {
                    options: [],
                    valueConsistsOf: "LEAF_PRIORITY"
                }
            },
            methods: {
                input: function (v, instanceId) {
                    console.log(v);
                    this.$emit('input', v);
                },
                getData: function () {
                    var app = this;
                    myAjax("Get", null, "/api/JG_STOPObserveMain/GetTreeDepartmentStaff", null, function (response) {
                        var ajaxModel = response.data;
                        app.options = PersonMenuHelper(ajaxModel, guidEmpty);
                    }, false);
                }
            },
            mounted: function () {
                this.getData();
            },
            template: ' <treeselect :multiple="multiple"     :disable-branch-nodes="true"   :value-consists-of="valueConsistsOf"  :options="options"    v-model="value" @input="input"  />'

        })
        Vue.component('treeselect', VueTreeselect.Treeselect)
        var app = new Vue({
            el: '#app',
            data: {
                Dom: {
                    //值
                    Value: {
                        AccordingYear_Month: '',//按年-月
                        AccordingYear_Day: '',//按年-日
                        AccordingYear_Hour: '',//按年-时
                        AccordingHalfYear_Month: '',//按半年-月
                        AccordingHalfYear_Day: '',//按半年-日
                        AccordingHalfYear_Hour: '',//按半年-时
                        AccordingQuarter_Month: '',//按季度-月
                        AccordingQuarter_Day: '',//按季度-日
                        AccordingQuarter_Hour: '',//按季度-时
                        AccordingDay_Hour: '',//按日-时
                        AccordingMonth_Day: '',//按月-日
                        AccordingMonth_Hour: '',//按月-时
                        AccordingTenDay_Day: '',//按旬-日
                        AccordingTenDay_Hour: '',//按旬-时
                        AccordingWeek_Week: '',//按周-周
                        AccordingWeek_Hour: '',//按周-时
                        Customized_Text: ''//自定义
                    },
                    //radio开关，true为禁用
                    RadioDisabled: true,
                    //select开关，true为禁用
                    SelectDisabled: {
                        AccordingYear_SelectDisabled: true,
                        AccordingHalfYear_SelectDisabled: true,
                        AccordingQuarter_SelectDisabled: true,
                        AccordingMonth_SelectDisabled: true,
                        AccordingTenDay_SelectDisabled: true,
                        AccordingWeek_SelectDisabled: true,
                        AccordingDay_SelectDisabled: true,
                        Customized_SelectDisabled: true,
                    }
                },
                day: [
                    {
                        value: 1,
                        label: '1日'
                    },
                    {
                        value: 2,
                        label: '2日'
                    },
                    {
                        value: 3,
                        label: '3日'
                    },
                    {
                        value: 4,
                        label: '4日'
                    },
                    {
                        value: 5,
                        label: '5日'
                    },
                    {
                        value: 6,
                        label: '6日'
                    },
                    {
                        value: 7,
                        label: '7日'
                    },
                    {
                        value: 8,
                        label: '8日'
                    },
                    {
                        value: 9,
                        label: '9日'
                    },
                    {
                        value: 10,
                        label: '10日'
                    },
                    {
                        value: 11,
                        label: '11日'
                    },
                    {
                        value: 12,
                        label: '12日'
                    },
                    {
                        value: 13,
                        label: '13日'
                    },
                    {
                        value: 14,
                        label: '14日'
                    },
                    {
                        value: 15,
                        label: '15日'
                    },
                    {
                        value: 16,
                        label: '16日'
                    },
                    {
                        value: 17,
                        label: '17日'
                    },
                    {
                        value: 18,
                        label: '18日'
                    },
                    {
                        value: 19,
                        label: '19日'
                    },
                    {
                        value: 20,
                        label: '20日'
                    },
                    {
                        value: 21,
                        label: '21日'
                    },
                    {
                        value: 22,
                        label: '22日'
                    },
                    {
                        value: 23,
                        label: '23日'
                    },
                    {
                        value: 24,
                        label: '24日'
                    },
                    {
                        value: 25,
                        label: '25日'
                    },
                    {
                        value: 26,
                        label: '26日'
                    },
                    {
                        value: 27,
                        label: '27日'
                    },
                    {
                        value: 28,
                        label: '28日'
                    },
                    {
                        value: 29,
                        label: '29日'
                    },
                    {
                        value: 30,
                        label: '30日'
                    },
                    {
                        value: 31,
                        label: '31日'
                    },

                ],
                week: [
                    {
                        value: 1,
                        label: '星期一'
                    },
                    {
                        value: 2,
                        label: '星期二'
                    },
                    {
                        value: 3,
                        label: '星期三'
                    },
                    {
                        value: 4,
                        label: '星期四'
                    },
                    {
                        value: 5,
                        label: '星期五'
                    },
                    {
                        value: 6,
                        label: '星期六'
                    }
                    ,
                    {
                        value: 7,
                        label: '星期日'
                    }
                ],

                hour: [
                    {
                        value: 1,
                        label: '1'
                    },
                    {
                        value: 2,
                        label: '2'
                    },
                    {
                        value: 3,
                        label: '3'
                    },
                    {
                        value: 4,
                        label: '4'
                    }
                    ,
                    {
                        value: 5,
                        label: '5'
                    },
                    {
                        value: 6,
                        label: '6'
                    },
                    {
                        value: 7,
                        label: '7'
                    },
                    {
                        value: 8,
                        label: '8'
                    },
                    {
                        value: 9,
                        label: '9'
                    },
                    {
                        value: 10,
                        label: '10'
                    },
                    {
                        value: 11,
                        label: '11'
                    },
                    {
                        value: 12,
                        label: '12'
                    },
                    {
                        value: 13,
                        label: '13'
                    },
                    {
                        value: 14,
                        label: '14'
                    },
                    {
                        value: 15,
                        label: '15'
                    },
                    {
                        value: 16,
                        label: '16'
                    },
                    {
                        value: 17,
                        label: '17'
                    },
                    {
                        value: 18,
                        label: '18'
                    },
                    {
                        value: 19,
                        label: '19'
                    },
                    {
                        value: 20,
                        label: '20'
                    },
                    {
                        value: 21,
                        label: '21'
                    },
                    {
                        value: 22,
                        label: '22'
                    },
                    {
                        value: 23,
                        label: '23'
                    }
                    ,
                    {
                        value: 24,
                        label: '24'
                    }
                ],
                id: '',
                Test: '1',
                FactoryID: '',
                frenquencyText: '未设置',
                ListItem: ListItem,
                nameList: [],
                //部门数据集
                department: [],
                //职务数据集
                duties: [],
                names: [
                    //{
                    //    name:'admin'
                    //}
                ],
                //部门model
                departmentId: null,
                //职务model
                dutyId: null,
                //选择部门后的信息对象
                deparmentObject: null,
                Form: {
                    test: 'good',
                    Frequency: {
                        IsNot: false,//是否提醒
                        Month: 1,//月
                        Week: 1,//周
                        Day: 1,//日
                        Hour: 1,//时
                        Text: 1,//自定义内容
                        Type: 1,//radio选中类型
                        MoveUp: '1',//天数
                    },//提醒频次
                    department: null,
                    duty: null,
                    name: null,
                    IsWarn: false,
                    WarnDays: null,
                    warnType: '',
                    beginTimeByMonth: null,
                    beginTimeByWeek: null,
                    beginTimeByDay: null,
                    //model: {
                    //    departmentId: '',
                    //    dutyId: '',
                    //    postID: '',
                    //    name:''
                    //},
                    offset: 0,
                    limit: 10
                },
                rules: {
                    'department': [
                        verification.NotNull
                    ],
                    'warnDays': [
                        verification.NotNull
                    ],
                    'name': [
                        verification.NotNull
                    ]

                }

            },

            mounted: function () {

                ////获取传值id
                this.id = getUrlParam("id");
                //this.getDepartmentData();
                var mythis = this;
                if (this.id != null) {
                    var url = '/api/JG_STOPTimes/get?id=' + this.id;
                    if (mythis.id != null && mythis.id != '') {
                        myAjax("get", mythis, url, null, function (response) {
                            var ajaxModel = response.data;

                            mythis.Form = ajaxModel;
                            //mythis.userFrom.sex = mythis.userFrom.sex + "";
                        }, false);
                    }
                }



                //this.getData();
                //tablehigh(this);//计算table高度以及el-tab-pane高度
                //this.Form.Frequency.IsNot = parent.app.Form.isWarn;
                //this.Form.Frequency.MoveUp = parent.app.Form.warnDays;

                //this.Form.Frequency.Day = parent.app.Form.beginTimeByMonth;
                //this.Form.Frequency.week = parent.app.Form.beginTimeByWeek;
                //this.Form.Frequency.Hour = parent.app.Form.beginTimeByDay;

                if (mythis.Form.isWarn) {
                    this.Dom.RadioDisabled = false;
                    this.RadioIsNotRemind(this.Form.warnType);
                }

                ////绑定select选中值
                BindSeleted(this);
                ////})

            },
            computed:
            {

                departmentSelectItem() {
                    return this.Form.department;
                },
                dutySelectItem() {
                    return this.Form.duty;
                }
            },
            watch: {


            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //Checkbox控制Radio启用禁用
                IsNotRemind: function (v) {
                    this.Dom.RadioDisabled = v ? false : true;
                    if (v == true) {
                        //this.RadioIsNotRemind('01');
                        //this.$refs['test1'].$el.click();
                        DisabledAll(this);
                        this.Form.warnType = '01';
                        this.Dom.SelectDisabled.AccordingMonth_SelectDisabled = false;
                        this.Dom.Value.AccordingMonth_Day = 1;
                        this.Dom.Value.AccordingMonth_Hour = 1;
                    }
                    else {
                        app.Form.warnType = null;
                        DisabledAll(this);
                    }

                    //DisabledAll(this);

                    //this.RadioIsNotRemind('01');
                    //this.Form.warnDays = 1;
                    //BindFormValue(this);

                },
                //Radio控制对应的input启用禁用
                RadioIsNotRemind: function (v) {
                    var f = this.Form;
                    //先禁用所有select
                    DisabledAll(this);
                    //启用指定radio下的select
                    switch (v) {

                        case "01": {
                            this.Dom.SelectDisabled.AccordingMonth_SelectDisabled = false;
                            this.Dom.Value.AccordingMonth_Day = 1;
                            this.Dom.Value.AccordingMonth_Hour = 1;
                            break;
                        }

                        case "02": {
                            this.Dom.SelectDisabled.AccordingWeek_SelectDisabled = false;
                            this.Dom.Value.AccordingWeek_Week = 1;
                            this.Dom.Value.AccordingWeek_Hour = 1;
                            break;
                        }

                        case "03": {
                            this.Dom.SelectDisabled.AccordingDay_SelectDisabled = false;
                            this.Dom.Value.AccordingDay_Hour = 1;
                            break;
                        }
                        default: break;
                    }
                },

                //提交数据
                onSubmitForm: function (formName) {
                    //test
                    //this.getName();
                    var mythis = this;
                    this.$refs[formName].validate(function (valid) {
                        //验证通过
                        if (valid) {

                            BindFormValue(mythis);
                            onSubmitForm(this, '/api/JG_STOPTimes/Save', mythis.Form);
                        } else {
                            //验证失败
                            return false;
                        }
                    });

                    var loadingObj;
                    if (mythis._isVue)
                        loadingObj = mythis.$loading(myloading);
                    else
                        loadingObj = mythis.app.$loading(myloading);
                    mythis.ListItem.loadingbut = false;
                    //mythis.submit = true;
                    loadingObj.close();

                },


                getData: function () {
                    var t = this.Form;
                    getData(this, '/api/JG_STOPTimes/get?id=' + this.id);
                    var tt = 1;
                },



                //关闭Dialog 回调
                closeDialog: function () {
                    //closeDialog(this);
                    this.ListItem.currentPage = 1;
                    this.GetPageData(1);
                },


                //跳页触发方法
                handleCurrentChange: function (val) { handleCurrentChange(this, val); },

                //初始化部门下拉树(完成)
                getDepartmentData: function () {

                    var mythis = this;
                    myAjax("post", this, '/api/SysDepartment/GetList', { model: { Name: '', Code: '', CreateFactory: this.FactoryID }, offset: 0, limit: 10 }, function (response) {
                        mythis.department = menuHelper(response.data.pageData, guidEmpty)
                    }, false);

                },
                //联动职务下拉框(完成)
                getDuty: function (pid) {
                    var mythis = this;
                    myAjax("get", mythis, '/api/SysDepartment/Get?id=' + pid, null, function (response) {
                        console.log(' response.data', response.data)
                        mythis.deparmentObject = response.data;

                    }, false);
                },
                //联动名单
                getName: function () {
                    var mythis = this;
                    myAjax("get", mythis, '/api/JG_STOPTimes/GetNames?departmentId=' + this.Form.department + '&dutyId=' + this.Form.duty, null, function (response) {
                        var a = mythis.Test;
                        var b = mythis.names;

                        mythis.names = response.data.users;



                    }, false);
                }
            },
        })


        //禁用全部select
        function DisabledAll(app) {

            //禁用所有select
            app.Dom.SelectDisabled.AccordingYear_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingHalfYear_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingQuarter_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingMonth_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingTenDay_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingWeek_SelectDisabled = true;
            app.Dom.SelectDisabled.AccordingDay_SelectDisabled = true;
            app.Dom.SelectDisabled.Customized_SelectDisabled = true;
            //清空所有select的选中值
            app.Dom.Value.AccordingYear_Month = ''; app.Dom.Value.AccordingYear_Day = ''; app.Dom.Value.AccordingYear_Hour = '';
            app.Dom.Value.AccordingHalfYear_Month = ''; app.Dom.Value.AccordingHalfYear_Day = ''; app.Dom.Value.AccordingHalfYear_Hour = '';
            app.Dom.Value.AccordingQuarter_Month = ''; app.Dom.Value.AccordingQuarter_Day = ''; app.Dom.Value.AccordingQuarter_Hour = '';
            app.Dom.Value.AccordingDay_Hour = '';
            app.Dom.Value.AccordingMonth_Day = ''; app.Dom.Value.AccordingMonth_Hour = '';
            app.Dom.Value.AccordingTenDay_Day = ''; app.Dom.Value.AccordingTenDay_Hour = '';
            app.Dom.Value.AccordingWeek_Week = ''; app.Dom.Value.AccordingWeek_Hour = '';
            app.Dom.Value.Customized_Text = '';
        }
        //绑定select选中值
        function BindSeleted(app) {
            switch (app.Form.warnType) {

                case "01":
                    app.Dom.Value.AccordingMonth_Day = app.Form.beginTimeByMonth;
                    app.Dom.Value.AccordingMonth_Hour = app.Form.beginTimeByDay;
                    break;

                case "02":
                    app.Dom.Value.AccordingWeek_Week = app.Form.beginTimeByWeek;
                    app.Dom.Value.AccordingWeek_Hour = app.Form.beginTimeByDay;
                    break;
                case "03":
                    app.Dom.Value.AccordingDay_Hour = app.Form.beginTimeByDay;
                    break;
                default: break;
            }
        }
        //给Form赋值
        function BindFormValue(app) {

            switch (app.Form.warnType) {

                case "03":
                    app.Form.beginTimeByDay = app.Dom.Value.AccordingDay_Hour;
                    break;
                case "01":
                    app.Form.beginTimeByMonth = app.Dom.Value.AccordingMonth_Day;
                    app.Form.beginTimeByDay = app.Dom.Value.AccordingMonth_Hour;
                    break;

                case "02":
                    app.Form.beginTimeByWeek = app.Dom.Value.AccordingWeek_Week;
                    app.Form.beginTimeByDay = app.Dom.Value.AccordingWeek_Hour;
                    break;

                default:
                    app.Form.beginTimeByMonth = "";
                    app.Form.beginTimeByDay = "";
                    app.Form.beginTimeByWeek = "";
                    //app.Form.warnDays = "";

                    break;
            }
        }
        //下拉树数据格式化
        function menuHelperX(list, pid) {
            var result = [];
            if (list.length <= 0)
                return list;
            list.forEach(function (v, i) {
                var temp = {};
                for (var key in v) {
                    temp[key] = v[key];
                }
                temp.label = v.name;
                temp.parentId = temp.parentId ? temp.parentId : guidEmpty;
                var obj;
                if (temp.parentId == pid) {
                    obj = temp;
                    var nextObj = menuHelperX(list, temp.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }
        //下拉树数据格式化
        function menuHelper(list, pid) {
            var result = [];
            if (list.length <= 0)
                return list;
            list.forEach(function (v, i) {
                var temp = {};
                for (var key in v) {
                    temp[key] = v[key];
                }
                temp.label = v.name;
                temp.parentId = temp.parentId ? temp.parentId : guidEmpty;
                var obj;
                if (temp.parentId == pid) {
                    obj = temp;
                    var nextObj = menuHelper(list, temp.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }

       
    </script>
</body>

</html>